﻿@model List<ASPMVC_first_app.Models.Customer>
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@if (Model.Count == 0)
{
    <h3>There are no users fcking asshole</h3>
}
else
{
    <br />
    <table id="customers" class="table table-bordered table-hover">
        <thead>
            <tr>
                <th>Id</th>
                <th>Name</th>
                <th>MembershipType</th>
                <th>Delete</th>
            </tr>
        </thead>
        <tbody>
            @*@foreach (var item in Model)
            {
                <tr>
                    <td>@item.Id</td>
                    <td>@Html.ActionLink(item.FirstName + " " + item.LastName, "Edit", "User", new { id = item.Id }, null)</td>
                    <td>@item.MembershipType.Name</td>
                    <td>
                        <button data-customer-id="@item.Id" class="btn-link js-delete">Delete</button>
                    </td>
                </tr>
            }*@
        </tbody>
    </table>
}

@section scripts
{
    <script>
        $(document)
            .ready(function () {

                $("#customers")
                    .DataTable(
                    {
                        ajax: {
                            url: "/api/customers",
                            dataSrc: ""
                        },
                        columns: [
                            {
                                data: "FirstName",
                                render: function (data, type, customer) {
                                    return "<a href='user/edit/" +
                                        customer.Id +
                                        "'>" +
                                        customer.FirstName +
                                        "&nbsp" +
                                        customer.LastName +
                                        "</a>";
                                }
                            },
                            {
                                data: "MembershipType.Name"
                            },
                            {
                                data: "Id",
                                render: function (data) {
                                    return "<button class = 'btn-link js-delete' data-customer-id=" +
                                        data +
                                        ">Delete</button>";
                                }
                            }
                        ]
                    });

                $("#customers")
                    .on("click",
                        ".js-delete",
                        function () {
                            var button = $(this);

                            bootbox.confirm("Do you realy want to delete customer?",
                                function (result) {
                                    if (result) {
                                        $.ajax({
                                            url: "/api/customers/" + button.attr("data-customer-id"),
                                            method: "DELETE",
                                            success: function () {
                                                button.parents("tr").remove();
                                            }
                                        });
                                    }
                                });


                        });
            });
    </script>
    @Scripts.Render("~/bundles/datatable")
}